<template>
  <div class="mycontainer">
    <div class="resume-container">
      <div v-if="resume">
        <div
          class="resume-section"
          style="display: flex; width: 100%; height: 100px"
        >
          <div class="picture-section" style="flex: 1">
            <img
              :src="resume.picture"
              alt="Profile Picture"
              v-if="resume.picture"
              style="width: 80px; height: 80px; margin: 0 auto"
            />
          </div>
          <div class="info-section" style="flex: 3">
            <div class="name-section" style="flex: 1">
              <p style="font-size: 20px">{{ resume.name }}</p>
            </div>
            <div class="gender-age-section" style="flex: 1; display: flex">
              <p>{{ resume.gender }}</p>
              &nbsp;&nbsp;&nbsp;
              <p>{{ resume.age }}岁</p>
            </div>
          </div>
          <div
            class="details-section"
            style="flex: 6; display: flex; flex-direction: column"
          >
            <div style="display: flex">
              <i class="el-icon-phone-outline"></i>
              &nbsp;&nbsp;
              <p>{{ resume.phoneNumber }}</p>
            </div>
            <div style="display: flex">
              <i class="el-icon-message"></i>
              &nbsp;&nbsp;
              <p>{{ resume.email }}</p>
            </div>
            <p>意向岗位：{{ resume.intention }}</p>
            <p>教育背景：{{ resume.background }}</p>
          </div>
        </div>
      </div>
    </div>



    <div class="mytags" style="display: flex">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="已投递" name="first"></el-tab-pane>
        <el-tab-pane label="已通过" name="second"></el-tab-pane>
        <el-tab-pane label="未通过" name="third"></el-tab-pane>
        <el-tab-pane label="消息" name="fourth"></el-tab-pane>
      </el-tabs>

    </div>
    <div>
        <my-info v-if="IsProgress === 1" :status="getStatus" ref="myInfoComponent"></my-info>
        <my-email v-else></my-email>
      </div>
  </div>
</template>

<script>
import axios from "axios";
import myInfo from '../../components/my/myInfo.vue';
import MyEmail from '../../components/my/MyEmail.vue';

export default {
  components: { myInfo, MyEmail },
  name: "ResumeComponent",
  data() {
    return {
      resume: null,
      InfoList: [],
      activeName: "first", 
      IsProgress: 1
    };
  },
  computed: {
    getStatus() {
      let status;
      if (this.activeName === "first") {
        status = 0;
      } else if (this.activeName === "second") {
        status = 1;
      } else if (this.activeName === "third") {
        status = 2;
      } else if (this.activeName === "fourth") {
        status = 3; 
      }
      return status;
    }
  },
  mounted() {
    this.fetchResume();
    this.fetchInfo(0); // 初始加载时获取已投递的信息
  },
  methods: {
    fetchResume() {
      axios
     .get("http://localhost:8080/resume/1")
     .then((response) => {
          this.resume = response.data.data;
        })
     .catch((error) => {
          console.error("Error fetching resume:", error);
        });
    },
    fetchInfo(status) {
      axios
     .get(`http://localhost:8080/resume/getResumeJobResponseYlx/3/${status}`)
     .then((response) => {
          this.InfoList = response.data;
        })
     .catch((error) => {
          console.error("Error fetching info:", error);
        });
    },
    handleClick(tab) {
      let status;
      if (tab.name === "first") {
        status = 0;
        this.IsProgress = 1;
      } else if (tab.name === "second") {
        status = 1;
        this.IsProgress = 1;
      } else if (tab.name === "third") {
        status = 2;
        this.IsProgress = 1;
      } else if (tab.name === "fourth") {
        this.IsProgress = 0;
      }
      this.fetchInfo(status);
      if (this.$refs.myInfoComponent) {
        this.$refs.myInfoComponent.fetchInfo(status);
      }
    },
  },
};
</script>

<style scoped>
.mycontainer {
  margin: 0 400px;
}
.resume-container {
  background-color: #e6f7ff;
}
.mytags {
  margin-top: 15px;
}
.resume-section {
  display: flex;
  width: 100%;
  height: 100px;
}
.picture-section {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.info-section {
  flex: 3;
  margin: 0 20px;
}
.name-section {
  flex: 1;
  margin-top: 9px;
}
.gender-age-section {
  flex: 1;
  display: flex;
  margin-top: 9px;
}
.details-section {
  flex: 6;
  display: flex;
  flex-direction: column;
}
</style>